<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 3 Basics | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.20 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 3 Basics | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 3 Basics | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-08-16" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="prerequisites.html"/>
<link rel="next" href="your-first-widget.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/accessible-code-block/empty-anchor.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#disclaimer"><i class="fa fa-check"></i>Disclaimer</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> Introduction</a>
<ul>
<li class="chapter" data-level="1.1" data-path="introduction.html"><a href="introduction.html#rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="introduction.html"><a href="introduction.html#methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a>
<ul>
<li class="chapter" data-level="1.2.1" data-path="introduction.html"><a href="introduction.html#v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="introduction.html"><a href="introduction.html#htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="introduction.html"><a href="introduction.html#shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
<li class="chapter" data-level="1.2.4" data-path="introduction.html"><a href="introduction.html#bubble"><i class="fa fa-check"></i><b>1.2.4</b> bubble</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="introduction.html"><a href="introduction.html#methods-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a>
<ul>
<li class="chapter" data-level="1.3.1" data-path="introduction.html"><a href="introduction.html#reactr"><i class="fa fa-check"></i><b>1.3.1</b> reactR</a></li>
<li class="chapter" data-level="1.3.2" data-path="introduction.html"><a href="introduction.html#r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a>
<ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#r-package-development"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a>
<ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#creating-a-package"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#build-load-and-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#json"><i class="fa fa-check"></i><b>2.2</b> JSON</a>
<ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#tabular-data"><i class="fa fa-check"></i><b>2.2.2</b> Tabular data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a>
<ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#developer-tools"><i class="fa fa-check"></i><b>2.3.1</b> Developer tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#variable-declaration-and-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable declaration and scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#document-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document object model</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="basics.html"><a href="basics.html"><i class="fa fa-check"></i><b>3</b> Basics</a>
<ul>
<li class="chapter" data-level="3.1" data-path="basics.html"><a href="basics.html#candidate-libraries"><i class="fa fa-check"></i><b>3.1</b> Candidate Libraries</a>
<ul>
<li class="chapter" data-level="3.1.1" data-path="basics.html"><a href="basics.html#plotly"><i class="fa fa-check"></i><b>3.1.1</b> Plotly</a></li>
<li class="chapter" data-level="3.1.2" data-path="basics.html"><a href="basics.html#highchart.js"><i class="fa fa-check"></i><b>3.1.2</b> Highchart.js</a></li>
<li class="chapter" data-level="3.1.3" data-path="basics.html"><a href="basics.html#chart.js"><i class="fa fa-check"></i><b>3.1.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="3.2" data-path="basics.html"><a href="basics.html#how-it-works"><i class="fa fa-check"></i><b>3.2</b> How it works</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>4</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="4.1" data-path="your-first-widget.html"><a href="your-first-widget.html#the-scaffold"><i class="fa fa-check"></i><b>4.1</b> The Scaffold</a></li>
<li class="chapter" data-level="4.2" data-path="your-first-widget.html"><a href="your-first-widget.html#the-output"><i class="fa fa-check"></i><b>4.2</b> The Output</a></li>
<li class="chapter" data-level="4.3" data-path="your-first-widget.html"><a href="your-first-widget.html#javascript-side"><i class="fa fa-check"></i><b>4.3</b> JavaScript-side</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html"><i class="fa fa-check"></i><b>5</b> A Realistic Widget</a>
<ul>
<li class="chapter" data-level="5.1" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#dependency"><i class="fa fa-check"></i><b>5.1</b> Dependency</a></li>
<li class="chapter" data-level="5.2" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>5.2</b> JavaScript</a></li>
<li class="chapter" data-level="5.3" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#html-element"><i class="fa fa-check"></i><b>5.3</b> HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="the-full-monty.html"><a href="the-full-monty.html"><i class="fa fa-check"></i><b>6</b> The Full Monty</a>
<ul>
<li class="chapter" data-level="6.1" data-path="the-full-monty.html"><a href="the-full-monty.html#dependencies"><i class="fa fa-check"></i><b>6.1</b> Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>6.2</b> JavaScript</a></li>
<li class="chapter" data-level="6.3" data-path="the-full-monty.html"><a href="the-full-monty.html#working-with-data"><i class="fa fa-check"></i><b>6.3</b> Working with Data</a></li>
<li class="chapter" data-level="6.4" data-path="the-full-monty.html"><a href="the-full-monty.html#transforming-data"><i class="fa fa-check"></i><b>6.4</b> Transforming Data</a>
<ul>
<li class="chapter" data-level="6.4.1" data-path="the-full-monty.html"><a href="the-full-monty.html#in-javascript"><i class="fa fa-check"></i><b>6.4.1</b> In JavaScript</a></li>
<li class="chapter" data-level="6.4.2" data-path="the-full-monty.html"><a href="the-full-monty.html#in-r"><i class="fa fa-check"></i><b>6.4.2</b> In R</a></li>
<li class="chapter" data-level="6.4.3" data-path="the-full-monty.html"><a href="the-full-monty.html#pros-cons"><i class="fa fa-check"></i><b>6.4.3</b> Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="6.5" data-path="the-full-monty.html"><a href="the-full-monty.html#on-print"><i class="fa fa-check"></i><b>6.5</b> On Print</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="advanced-topics.html"><a href="advanced-topics.html"><i class="fa fa-check"></i><b>7</b> Advanced Topics</a>
<ul>
<li class="chapter" data-level="7.1" data-path="advanced-topics.html"><a href="advanced-topics.html#shared-variables"><i class="fa fa-check"></i><b>7.1</b> Shared Variables</a>
<ul>
<li class="chapter" data-level="7.1.1" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing"><i class="fa fa-check"></i><b>7.1.1</b> Sizing</a></li>
<li class="chapter" data-level="7.1.2" data-path="advanced-topics.html"><a href="advanced-topics.html#sizing-policy"><i class="fa fa-check"></i><b>7.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="7.2" data-path="advanced-topics.html"><a href="advanced-topics.html#resizing"><i class="fa fa-check"></i><b>7.2</b> Resizing</a></li>
<li class="chapter" data-level="7.3" data-path="advanced-topics.html"><a href="advanced-topics.html#pre-render-hooks-security"><i class="fa fa-check"></i><b>7.3</b> Pre Render Hooks &amp; Security</a></li>
<li class="chapter" data-level="7.4" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>7.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="7.5" data-path="advanced-topics.html"><a href="advanced-topics.html#prepend-append-content"><i class="fa fa-check"></i><b>7.5</b> Prepend &amp; Append Content</a></li>
<li class="chapter" data-level="7.6" data-path="the-full-monty.html"><a href="the-full-monty.html#dependencies"><i class="fa fa-check"></i><b>7.6</b> Dependencies</a></li>
<li class="chapter" data-level="7.7" data-path="advanced-topics.html"><a href="advanced-topics.html#compatibility"><i class="fa fa-check"></i><b>7.7</b> Compatibility</a></li>
<li class="chapter" data-level="7.8" data-path="advanced-topics.html"><a href="advanced-topics.html#unit-tests"><i class="fa fa-check"></i><b>7.8</b> Unit Tests</a></li>
<li class="chapter" data-level="7.9" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>7.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="working-with-shiny.html"><a href="working-with-shiny.html"><i class="fa fa-check"></i><b>8</b> Working with Shiny</a>
<ul>
<li class="chapter" data-level="8.1" data-path="working-with-shiny.html"><a href="working-with-shiny.html#javascript-to-r"><i class="fa fa-check"></i><b>8.1</b> JavaScript to R</a></li>
<li class="chapter" data-level="8.2" data-path="working-with-shiny.html"><a href="working-with-shiny.html#input-handler"><i class="fa fa-check"></i><b>8.2</b> Input Handler</a></li>
<li class="chapter" data-level="8.3" data-path="working-with-shiny.html"><a href="working-with-shiny.html#r-to-javascript"><i class="fa fa-check"></i><b>8.3</b> R to JavaScript</a>
<ul>
<li class="chapter" data-level="8.3.1" data-path="working-with-shiny.html"><a href="working-with-shiny.html#send-data"><i class="fa fa-check"></i><b>8.3.1</b> Send Data</a></li>
<li class="chapter" data-level="8.3.2" data-path="working-with-shiny.html"><a href="working-with-shiny.html#retrieve-widget-instance"><i class="fa fa-check"></i><b>8.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="8.3.3" data-path="working-with-shiny.html"><a href="working-with-shiny.html#handle-data"><i class="fa fa-check"></i><b>8.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="8.4" data-path="working-with-shiny.html"><a href="working-with-shiny.html#proxy-function"><i class="fa fa-check"></i><b>8.4</b> Proxy Function</a></li>
<li class="chapter" data-level="8.5" data-path="working-with-shiny.html"><a href="working-with-shiny.html#clear-data"><i class="fa fa-check"></i><b>8.5</b> Clear Data</a></li>
<li class="chapter" data-level="8.6" data-path="working-with-shiny.html"><a href="working-with-shiny.html#update"><i class="fa fa-check"></i><b>8.6</b> Update</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="9" data-path="discover.html"><a href="discover.html"><i class="fa fa-check"></i><b>9</b> Discover</a>
<ul>
<li class="chapter" data-level="9.1" data-path="discover.html"><a href="discover.html#static-files"><i class="fa fa-check"></i><b>9.1</b> Static Files</a></li>
<li class="chapter" data-level="9.2" data-path="discover.html"><a href="discover.html#example---alerts"><i class="fa fa-check"></i><b>9.2</b> Example - Alerts</a></li>
<li class="chapter" data-level="9.3" data-path="discover.html"><a href="discover.html#from-r-to-javascript"><i class="fa fa-check"></i><b>9.3</b> From R to JavaScript</a></li>
<li class="chapter" data-level="9.4" data-path="discover.html"><a href="discover.html#from-javascript-to-r"><i class="fa fa-check"></i><b>9.4</b> From JavaScript to R</a></li>
<li class="chapter" data-level="9.5" data-path="discover.html"><a href="discover.html#deserialise"><i class="fa fa-check"></i><b>9.5</b> Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="a-complete-integration.html"><a href="a-complete-integration.html"><i class="fa fa-check"></i><b>10</b> A Complete Integration</a>
<ul>
<li class="chapter" data-level="10.1" data-path="a-complete-integration.html"><a href="a-complete-integration.html#serialisation"><i class="fa fa-check"></i><b>10.1</b> Serialisation</a></li>
<li class="chapter" data-level="10.2" data-path="a-complete-integration.html"><a href="a-complete-integration.html#events-callbacks"><i class="fa fa-check"></i><b>10.2</b> Events &amp; Callbacks</a></li>
<li class="chapter" data-level="10.3" data-path="a-complete-integration.html"><a href="a-complete-integration.html#as-a-package"><i class="fa fa-check"></i><b>10.3</b> As a Package</a>
<ul>
<li class="chapter" data-level="10.3.1" data-path="the-full-monty.html"><a href="the-full-monty.html#dependencies"><i class="fa fa-check"></i><b>10.3.1</b> Dependencies</a></li>
<li class="chapter" data-level="10.3.2" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>10.3.2</b> R Code</a></li>
<li class="chapter" data-level="10.3.3" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>10.3.3</b> JavaScript Code</a></li>
<li class="chapter" data-level="10.3.4" data-path="working-with-shiny.html"><a href="working-with-shiny.html#input-handler"><i class="fa fa-check"></i><b>10.3.4</b> Input Handler</a></li>
<li class="chapter" data-level="10.3.5" data-path="a-complete-integration.html"><a href="a-complete-integration.html#wrapping-up"><i class="fa fa-check"></i><b>10.3.5</b> Wrapping up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="11" data-path="tips-tricks.html"><a href="tips-tricks.html"><i class="fa fa-check"></i><b>11</b> Tips &amp; Tricks</a>
<ul>
<li class="chapter" data-level="11.1" data-path="tips-tricks.html"><a href="tips-tricks.html#shiny-events"><i class="fa fa-check"></i><b>11.1</b> Shiny Events</a></li>
<li class="chapter" data-level="11.2" data-path="tips-tricks.html"><a href="tips-tricks.html#table-buttons"><i class="fa fa-check"></i><b>11.2</b> Table Buttons</a></li>
<li class="chapter" data-level="11.3" data-path="tips-tricks.html"><a href="tips-tricks.html#jquery---toggle"><i class="fa fa-check"></i><b>11.3</b> jQuery - Toggle</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="custom-outputs.html"><a href="custom-outputs.html"><i class="fa fa-check"></i><b>12</b> Custom Outputs</a>
<ul>
<li class="chapter" data-level="12.1" data-path="custom-outputs.html"><a href="custom-outputs.html#inner-workings"><i class="fa fa-check"></i><b>12.1</b> Inner-workings</a></li>
<li class="chapter" data-level="12.2" data-path="custom-outputs.html"><a href="custom-outputs.html#discover-lena.js"><i class="fa fa-check"></i><b>12.2</b> Discover Lena.js</a></li>
<li class="chapter" data-level="12.3" data-path="custom-outputs.html"><a href="custom-outputs.html#setup"><i class="fa fa-check"></i><b>12.3</b> Setup</a></li>
<li class="chapter" data-level="12.4" data-path="custom-outputs.html"><a href="custom-outputs.html#output"><i class="fa fa-check"></i><b>12.4</b> Output</a></li>
<li class="chapter" data-level="12.5" data-path="custom-outputs.html"><a href="custom-outputs.html#render"><i class="fa fa-check"></i><b>12.5</b> Render</a></li>
<li class="chapter" data-level="12.6" data-path="custom-outputs.html"><a href="custom-outputs.html#javascript-binding"><i class="fa fa-check"></i><b>12.6</b> JavaScript Binding</a></li>
<li class="chapter" data-level="12.7" data-path="custom-outputs.html"><a href="custom-outputs.html#test"><i class="fa fa-check"></i><b>12.7</b> Test</a></li>
</ul></li>
<li class="part"><span><b>IV JavaScript for Computations</b></span></li>
<li class="chapter" data-level="13" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>13</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="13.1" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i><b>13.1</b> Installation</a></li>
<li class="chapter" data-level="13.2" data-path="basics.html"><a href="basics.html#basics"><i class="fa fa-check"></i><b>13.2</b> Basics</a></li>
<li class="chapter" data-level="13.3" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i><b>13.3</b> External Libraries</a></li>
<li class="chapter" data-level="13.4" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i><b>13.4</b> With Npm</a></li>
<li class="chapter" data-level="13.5" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i><b>13.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="node.html"><a href="node.html"><i class="fa fa-check"></i><b>14</b> Node.js with Bubble</a>
<ul>
<li class="chapter" data-level="14.1" data-path="basics.html"><a href="basics.html#basics"><i class="fa fa-check"></i><b>14.1</b> Basics</a></li>
<li class="chapter" data-level="14.2" data-path="node.html"><a href="node.html#r-markdown-engine"><i class="fa fa-check"></i><b>14.2</b> R Markdown Engine</a></li>
<li class="chapter" data-level="14.3" data-path="node.html"><a href="node.html#npm"><i class="fa fa-check"></i><b>14.3</b> Npm</a></li>
</ul></li>
<li class="part"><span><b>V Examples</b></span></li>
<li class="chapter" data-level="15" data-path="ploty.html"><a href="ploty.html"><i class="fa fa-check"></i><b>15</b> Ploty</a>
<ul>
<li class="chapter" data-level="15.1" data-path="discover.html"><a href="discover.html#discover"><i class="fa fa-check"></i><b>15.1</b> Discover</a></li>
<li class="chapter" data-level="15.2" data-path="basics.html"><a href="basics.html#basics"><i class="fa fa-check"></i><b>15.2</b> Basics</a></li>
<li class="chapter" data-level="15.3" data-path="working-with-shiny.html"><a href="working-with-shiny.html#javascript-to-r"><i class="fa fa-check"></i><b>15.3</b> JavaScript to R</a></li>
<li class="chapter" data-level="15.4" data-path="working-with-shiny.html"><a href="working-with-shiny.html#r-to-javascript"><i class="fa fa-check"></i><b>15.4</b> R to JavaScript</a></li>
<li class="chapter" data-level="15.5" data-path="ploty.html"><a href="ploty.html#size-resize"><i class="fa fa-check"></i><b>15.5</b> Size &amp; Resize</a></li>
<li class="chapter" data-level="15.6" data-path="ploty.html"><a href="ploty.html#performance-security"><i class="fa fa-check"></i><b>15.6</b> Performance &amp; Security</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="image-classifier.html"><a href="image-classifier.html"><i class="fa fa-check"></i><b>16</b> Image Classifier</a>
<ul>
<li class="chapter" data-level="16.1" data-path="discover.html"><a href="discover.html#discover"><i class="fa fa-check"></i><b>16.1</b> Discover</a></li>
<li class="chapter" data-level="16.2" data-path="custom-outputs.html"><a href="custom-outputs.html#setup"><i class="fa fa-check"></i><b>16.2</b> Setup</a></li>
<li class="chapter" data-level="16.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>16.3</b> JavaScript</a></li>
<li class="chapter" data-level="16.4" data-path="working-with-shiny.html"><a href="working-with-shiny.html#input-handler"><i class="fa fa-check"></i><b>16.4</b> Input Handler</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="progress-bar.html"><a href="progress-bar.html"><i class="fa fa-check"></i><b>17</b> Progress Bar</a>
<ul>
<li class="chapter" data-level="17.1" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>17.1</b> R code</a></li>
<li class="chapter" data-level="17.2" data-path="advanced-topics.html"><a href="advanced-topics.html#javascript-code"><i class="fa fa-check"></i><b>17.2</b> JavaScript code</a></li>
<li class="chapter" data-level="17.3" data-path="progress-bar.html"><a href="progress-bar.html#events"><i class="fa fa-check"></i><b>17.3</b> Events</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="machine-learning.html"><a href="machine-learning.html"><i class="fa fa-check"></i><b>18</b> Machine Learning</a>
<ul>
<li class="chapter" data-level="18.1" data-path="a-realistic-widget.html"><a href="a-realistic-widget.html#dependency"><i class="fa fa-check"></i><b>18.1</b> Dependency</a></li>
<li class="chapter" data-level="18.2" data-path="machine-learning.html"><a href="machine-learning.html#simple-regression"><i class="fa fa-check"></i><b>18.2</b> Simple Regression</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="cookies.html"><a href="cookies.html"><i class="fa fa-check"></i><b>19</b> Cookies</a>
<ul>
<li class="chapter" data-level="19.1" data-path="cookies.html"><a href="cookies.html#discover-js-cookie"><i class="fa fa-check"></i><b>19.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="19.2" data-path="custom-outputs.html"><a href="custom-outputs.html#setup"><i class="fa fa-check"></i><b>19.2</b> Setup</a></li>
<li class="chapter" data-level="19.3" data-path="prerequisites.html"><a href="prerequisites.html#javascript"><i class="fa fa-check"></i><b>19.3</b> JavaScript</a></li>
<li class="chapter" data-level="19.4" data-path="prerequisites.html"><a href="prerequisites.html#r-code"><i class="fa fa-check"></i><b>19.4</b> R Code</a></li>
</ul></li>
<li class="part"><span><b>VI Closing Remarks</b></span></li>
<li class="chapter" data-level="20" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>20</b> Conclusion</a>
<ul>
<li class="chapter" data-level="20.1" data-path="advanced-topics.html"><a href="advanced-topics.html#performances"><i class="fa fa-check"></i><b>20.1</b> Performances</a></li>
<li class="chapter" data-level="20.2" data-path="conclusion.html"><a href="conclusion.html#road-ahead"><i class="fa fa-check"></i><b>20.2</b> Road ahead</a>
<ul>
<li class="chapter" data-level="20.2.1" data-path="conclusion.html"><a href="conclusion.html#computation"><i class="fa fa-check"></i><b>20.2.1</b> Computation</a></li>
<li class="chapter" data-level="20.2.2" data-path="introduction.html"><a href="introduction.html#shiny"><i class="fa fa-check"></i><b>20.2.2</b> Shiny</a></li>
<li class="chapter" data-level="20.2.3" data-path="introduction.html"><a href="introduction.html#htmlwidgets"><i class="fa fa-check"></i><b>20.2.3</b> htmlwidgets</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="basics" class="section level1" number="3">
<h1><span class="header-section-number">Chapter 3</span> Basics</h1>
<p>This part of the book explores the integration of JavaScript with R using the htmlwidgets package which focuses on libraries that produce a visual output, it is often used for data visualisation but is not limited to it.</p>
<p>As in previous parts of this book we mainly learn through examples, building multiple widgets of increasing complexity as we progress through the chapter. Before writing the first widget, we explore JavaScript libraries that make great candidates for htmlwidgets and attempt to understand how they work to grasp what is expected from the developer in order to integrate them with R. Finally, we build up on the previous chapter to improve how htmlwidgets work with shiny.</p>
<div id="candidate-libraries" class="section level2" number="3.1">
<h2><span class="header-section-number">3.1</span> Candidate Libraries</h2>
<p>Before going down the rabbit hole it is good to take a look at the types of libraries one will work with. As htmlwidgets’ main clients are JavaScript visualisation libraries let us take a look at some such popular libraries and briefly analyse at how they work and what they have in common. This will greatly help conceptualise what one is trying to achieve in this chapter.</p>
<div id="plotly" class="section level3" number="3.1.1">
<h3><span class="header-section-number">3.1.1</span> Plotly</h3>
<p><a href="https://plotly.com/javascript/">Plotly.js</a> is probably one of the more popular out there, it provides over 40 fully customiseable chart types, many of which are very sophisticated. This is indeed the JavaScript library used by the R package of the same name: plotly.</p>
<p>Looking at the code presented in the “Get Started” guide reveals just how convenient the library is. One must import plotly, of course, then have a <code>&lt;div&gt;</code> where the visualisation will be placed, then, using <code>Plotly.newPlot</code>, create the actual visualisation by passing it first the element previously mentioned and a JSON of options that describe the chart.</p>
<div class="sourceCode" id="cb58"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb58-1"><a href="basics.html#cb58-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb58-2"><a href="basics.html#cb58-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb58-3"><a href="basics.html#cb58-3"></a></span>
<span id="cb58-4"><a href="basics.html#cb58-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb58-5"><a href="basics.html#cb58-5"></a>  <span class="co">&lt;!-- Import library --&gt;</span></span>
<span id="cb58-6"><a href="basics.html#cb58-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;plotly-latest.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb58-7"><a href="basics.html#cb58-7"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb58-8"><a href="basics.html#cb58-8"></a></span>
<span id="cb58-9"><a href="basics.html#cb58-9"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb58-10"><a href="basics.html#cb58-10"></a>  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></span>
<span id="cb58-11"><a href="basics.html#cb58-11"></a>  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;chart&quot;</span><span class="ot"> style=</span><span class="st">&quot;width:600px;height:400px;&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb58-12"><a href="basics.html#cb58-12"></a></span>
<span id="cb58-13"><a href="basics.html#cb58-13"></a>  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></span>
<span id="cb58-14"><a href="basics.html#cb58-14"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb58-15"><a href="basics.html#cb58-15"></a>    el <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&#39;chart&#39;</span>)<span class="op">;</span></span>
<span id="cb58-16"><a href="basics.html#cb58-16"></a>    <span class="va">Plotly</span>.<span class="at">newPlot</span>(el<span class="op">,</span> [<span class="op">{</span></span>
<span id="cb58-17"><a href="basics.html#cb58-17"></a>      <span class="dt">x</span><span class="op">:</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">5</span>]<span class="op">,</span></span>
<span id="cb58-18"><a href="basics.html#cb58-18"></a>      <span class="dt">y</span><span class="op">:</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">16</span>] <span class="op">}</span>]</span>
<span id="cb58-19"><a href="basics.html#cb58-19"></a>    )<span class="op">;</span></span>
<span id="cb58-20"><a href="basics.html#cb58-20"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb58-21"><a href="basics.html#cb58-21"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb58-22"><a href="basics.html#cb58-22"></a></span>
<span id="cb58-23"><a href="basics.html#cb58-23"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<div class="figure">
<img src="images/candidate-plotly.png" alt="" />
<p class="caption">Plotly.js example</p>
</div>
<p>Now let’s look at how another popular library does it.</p>
</div>
<div id="highchart.js" class="section level3" number="3.1.2">
<h3><span class="header-section-number">3.1.2</span> Highchart.js</h3>
<p><a href="https://www.highcharts.com/">Highcharts</a> is another library which allows creating gorgeous visualisation, maps, and more, it’s also very popular albeit not being entirely open-source.</p>
<div class="sourceCode" id="cb59"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb59-1"><a href="basics.html#cb59-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb59-2"><a href="basics.html#cb59-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb59-3"><a href="basics.html#cb59-3"></a></span>
<span id="cb59-4"><a href="basics.html#cb59-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb59-5"><a href="basics.html#cb59-5"></a>  <span class="co">&lt;!-- Import library --&gt;</span></span>
<span id="cb59-6"><a href="basics.html#cb59-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;highcharts.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb59-7"><a href="basics.html#cb59-7"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb59-8"><a href="basics.html#cb59-8"></a></span>
<span id="cb59-9"><a href="basics.html#cb59-9"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb59-10"><a href="basics.html#cb59-10"></a>  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></span>
<span id="cb59-11"><a href="basics.html#cb59-11"></a>  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;chart&quot;</span><span class="ot"> style=</span><span class="st">&quot;width:100%;height:400px;&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb59-12"><a href="basics.html#cb59-12"></a></span>
<span id="cb59-13"><a href="basics.html#cb59-13"></a>  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></span>
<span id="cb59-14"><a href="basics.html#cb59-14"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb59-15"><a href="basics.html#cb59-15"></a>    <span class="kw">var</span> myChart <span class="op">=</span> <span class="va">Highcharts</span>.<span class="at">chart</span>(<span class="st">&#39;chart&#39;</span><span class="op">,</span> <span class="op">{</span></span>
<span id="cb59-16"><a href="basics.html#cb59-16"></a>        <span class="dt">xAxis</span><span class="op">:</span> <span class="op">{</span></span>
<span id="cb59-17"><a href="basics.html#cb59-17"></a>            <span class="dt">categories</span><span class="op">:</span> [<span class="st">&#39;Apples&#39;</span><span class="op">,</span> <span class="st">&#39;Bananas&#39;</span><span class="op">,</span> <span class="st">&#39;Oranges&#39;</span>]</span>
<span id="cb59-18"><a href="basics.html#cb59-18"></a>        <span class="op">},</span></span>
<span id="cb59-19"><a href="basics.html#cb59-19"></a>        <span class="dt">series</span><span class="op">:</span> [<span class="op">{</span></span>
<span id="cb59-20"><a href="basics.html#cb59-20"></a>            <span class="dt">name</span><span class="op">:</span> <span class="st">&#39;Jane&#39;</span><span class="op">,</span></span>
<span id="cb59-21"><a href="basics.html#cb59-21"></a>            <span class="dt">data</span><span class="op">:</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> <span class="dv">4</span>]</span>
<span id="cb59-22"><a href="basics.html#cb59-22"></a>        <span class="op">},</span> <span class="op">{</span></span>
<span id="cb59-23"><a href="basics.html#cb59-23"></a>            <span class="dt">name</span><span class="op">:</span> <span class="st">&#39;John&#39;</span><span class="op">,</span></span>
<span id="cb59-24"><a href="basics.html#cb59-24"></a>            <span class="dt">data</span><span class="op">:</span> [<span class="dv">5</span><span class="op">,</span> <span class="dv">7</span><span class="op">,</span> <span class="dv">3</span>]</span>
<span id="cb59-25"><a href="basics.html#cb59-25"></a>        <span class="op">}</span>]</span>
<span id="cb59-26"><a href="basics.html#cb59-26"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb59-27"><a href="basics.html#cb59-27"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb59-28"><a href="basics.html#cb59-28"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb59-29"><a href="basics.html#cb59-29"></a></span>
<span id="cb59-30"><a href="basics.html#cb59-30"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<div class="figure">
<img src="images/candidate-highcharts.png" alt="" />
<p class="caption">Highcharts example</p>
</div>
<p>The above is very similar to what plotly.js requires: import libraries, create a <code>&lt;div&gt;</code> where to put the visualisation, and, to create the chart, run a function which also takes the id of the div where to place the chart and a JSON of options defining the actual chart, including the data.</p>
</div>
<div id="chart.js" class="section level3" number="3.1.3">
<h3><span class="header-section-number">3.1.3</span> Chart.js</h3>
<p><a href="https://www.chartjs.org/">Chart.js</a> is yet another library which to draw standard charts popular for its permissive license and convenient API.</p>
<div class="sourceCode" id="cb60"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb60-1"><a href="basics.html#cb60-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb60-2"><a href="basics.html#cb60-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb60-3"><a href="basics.html#cb60-3"></a></span>
<span id="cb60-4"><a href="basics.html#cb60-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb60-5"><a href="basics.html#cb60-5"></a>  <span class="co">&lt;!-- Import library --&gt;</span></span>
<span id="cb60-6"><a href="basics.html#cb60-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;Chart.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb60-7"><a href="basics.html#cb60-7"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb60-8"><a href="basics.html#cb60-8"></a></span>
<span id="cb60-9"><a href="basics.html#cb60-9"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb60-10"><a href="basics.html#cb60-10"></a>  <span class="co">&lt;!-- canvas to hold visualisation --&gt;</span></span>
<span id="cb60-11"><a href="basics.html#cb60-11"></a>  <span class="kw">&lt;canvas</span><span class="ot"> id=</span><span class="st">&quot;chart&quot;</span><span class="kw">&gt;&lt;/canvas&gt;</span></span>
<span id="cb60-12"><a href="basics.html#cb60-12"></a></span>
<span id="cb60-13"><a href="basics.html#cb60-13"></a>  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></span>
<span id="cb60-14"><a href="basics.html#cb60-14"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb60-15"><a href="basics.html#cb60-15"></a>    <span class="kw">var</span> el <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&#39;chart&#39;</span>).<span class="at">getContext</span>(<span class="st">&#39;2d&#39;</span>)<span class="op">;</span>    </span>
<span id="cb60-16"><a href="basics.html#cb60-16"></a>    <span class="kw">var</span> myChart <span class="op">=</span> <span class="kw">new</span> <span class="at">Chart</span>(el<span class="op">,</span> <span class="op">{</span></span>
<span id="cb60-17"><a href="basics.html#cb60-17"></a>      <span class="dt">type</span><span class="op">:</span> <span class="st">&#39;bar&#39;</span><span class="op">,</span></span>
<span id="cb60-18"><a href="basics.html#cb60-18"></a>      <span class="dt">data</span><span class="op">:</span> <span class="op">{</span></span>
<span id="cb60-19"><a href="basics.html#cb60-19"></a>        <span class="dt">labels</span><span class="op">:</span> [<span class="st">&#39;Red&#39;</span><span class="op">,</span> <span class="st">&#39;Blue&#39;</span><span class="op">,</span> <span class="st">&#39;Yellow&#39;</span><span class="op">,</span> <span class="st">&#39;Green&#39;</span><span class="op">,</span> <span class="st">&#39;Purple&#39;</span><span class="op">,</span> <span class="st">&#39;Orange&#39;</span>]<span class="op">,</span></span>
<span id="cb60-20"><a href="basics.html#cb60-20"></a>        <span class="dt">datasets</span><span class="op">:</span> [<span class="op">{</span></span>
<span id="cb60-21"><a href="basics.html#cb60-21"></a>          <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;# of Votes&#39;</span><span class="op">,</span></span>
<span id="cb60-22"><a href="basics.html#cb60-22"></a>          <span class="dt">data</span><span class="op">:</span> [<span class="dv">12</span><span class="op">,</span> <span class="dv">19</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]</span>
<span id="cb60-23"><a href="basics.html#cb60-23"></a>        <span class="op">}</span>]</span>
<span id="cb60-24"><a href="basics.html#cb60-24"></a>      <span class="op">}</span></span>
<span id="cb60-25"><a href="basics.html#cb60-25"></a>    <span class="op">}</span>)<span class="op">;</span></span>
<span id="cb60-26"><a href="basics.html#cb60-26"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb60-27"><a href="basics.html#cb60-27"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb60-28"><a href="basics.html#cb60-28"></a></span>
<span id="cb60-29"><a href="basics.html#cb60-29"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<div class="figure">
<img src="images/candidate-chartjs.png" alt="" />
<p class="caption">Chart.js example</p>
</div>
<p>We again observe a very similar structure as with previous libraries. The library is imported, instead of a <code>div</code> chart.js uses a <code>canvas</code>, and the visualisation is also created from a single function which takes the canvas as first argument and a JSON of options as second.</p>
<p>Hopefully this reveals the repeating structure such libraries tend to follow as well as demonstrate how little JavaScript code is actually involved. It also hints at what should be reproduced, to some extent at least, using R.</p>
</div>
</div>
<div id="how-it-works" class="section level2" number="3.2">
<h2><span class="header-section-number">3.2</span> How it works</h2>
<p>Imagine there is no such package as htmlwidgets to help create interactive visualisations from R: how would one attempt to go about it?</p>
<p>As observed, an interactive visualisation using JavaScript will be contained within an HTML document, therefore it would probably have to be created first. Secondly, the visualisation that is yet to be created likely relies on external libraries, these would need to be imported in the document. The document should also include an HTML element (e.g.: <code>&lt;div&gt;</code>) to host said visualisation. Then data would have to be serialised in R and embedded into the document where it should be read by JavaScript code that uses it to create the visualisation. Finally all should be managed to work seamlessly across R markdown, shiny, and other environments.</p>
<p>Thankfully the htmlwidgets package is there to handle most of this. Nonetheless, it is important to understand that these operations are undertaken (to some degree) by htmlwidgets.</p>
<p>Must remember when building htmlwidgets:</p>
<ul>
<li>Import dependencies</li>
<li>Create an html element to hold visualisation</li>
<li>Serialise R data to JSON</li>
<li>Handle JSON data to produce visualisation</li>
</ul>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="prerequisites.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="your-first-widget.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/3-20-htmlwidgets-basic.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
